<script setup lang="ts">
const props = defineProps({
  label: {
    type: String,
    default: ''
  },
  value: {
    type: String,
    required: true // 改为必填属性
  },
})

const context = inject('navListContext', {
  activeValue: ref(''),
  registerItem: (value: string) => {
  },
  setActive: (value: string) => {
  },
  unregisterItem: (value: string) => {
  } // 新增注销方法
})

const isActive = computed(() => context.activeValue.value === props.value)
const setActive = (value: string) => context.setActive(value)

// 生命周期管理
onMounted(() => context.registerItem(props.value))
onUnmounted(() => context.unregisterItem(props.value))
</script>

<template>
  <view
      class="nav-item"
      :class="{ active: isActive }"
      @click="setActive(value)"
      :id="`nav-item-${value}`"
  >
    <text class="nav-label">{{ label }}</text>
  </view>
</template>

<style scoped lang="scss">
.nav-item {
  display: inline-block;
  padding: 12rpx 18rpx;
  transition: all 0.3s;

  .nav-label {
    font-size: 28rpx;
    color: #666;
  }

  &.active {
    .nav-label {
      color: $uni-primary;
      font-weight: 500;
    }

    position: relative;

    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 26rpx;
      width: calc(100% - 52rpx);
      height: 4rpx;
      background: $uni-primary;
    }
  }
}
</style>